<template>
  <div class="body">
    <div>
      <table>
        <tr>
          <td class="title1">专业名称：</td>
          <td class="cont1">供电专业</td>
          <td></td>
          <td class="title1 jiange">科室名称：</td>
          <td class="cont1">供电技术科</td>
        </tr>
        <tr>
          <td class="title1">机构名称：</td>
          <td class="block1 cont1" style="font-size: 13px;">              
            <a-select
              v-model:value="shopvalue"
              show-search
              placeholder=""
              style="width: 183px"
              :options="options"
              :filter-option="filterOption"
              @focus="handleFocus"
              @blur="handleBlur"
              @change="handleChange"
            />
      
          </td>
  
          <td class="title1"><button class="button1 jiange" @click="handleFilter(shopvalue)">查询</button></td>
        </tr>
        <tr>
          <!-- <td></td>
          <td></td> -->
          <td><button class="button1" @click="handleSet">设置定额</button></td>

        </tr>
      </table>
    </div>
    <!-- <a-button class="editable-add-btn" style="margin-bottom: 8px" @click="handleAdd">Add</a-button> -->
    <!-- <a-button class="editable-add-btn" style="margin-bottom: 8px" @click="handleSet">设置定额</a-button> -->
    <a-table bordered :data-source="dataSource" :columns="columns" pagination>
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex === 'name'">
          <div class="editable-cell">
            <div v-if="editableData[record.key]" class="editable-cell-input-wrapper">
              <a-input v-model:value="editableData[record.id].name" @pressEnter="save(record.id)" />
              <check-outlined class="editable-cell-icon-check" @click="save(record.id)" />
            </div>
            <div v-else class="editable-cell-text-wrapper">
              {{ text || ' ' }}
              <edit-outlined class="editable-cell-icon" @click="edit(record.id)" />
            </div>
          </div>
        </template>
        <template v-else-if="column.dataIndex === 'operation'">
          <button class="button2" @click="handleEdit(record)">定额更改</button>
          <a-popconfirm
            v-if="dataSource.length"
            title="Sure to delete?"
            @confirm="onDelete(record.id)"
          >
            <button class="button2">删除</button>
          </a-popconfirm>
          <button class="button2">历史记录</button>
        </template>
      </template>
    </a-table>
    <Modal ref="modalRef" @loadData="loadData" />
    <editModal ref="editRef" @loadData="loadData" />
  </div>
</template>

<script setup>
  // import { ref,  onMounted} from 'vue'
  import { ref,  reactive, onMounted} from 'vue'
  import { CheckOutlined, EditOutlined } from '@ant-design/icons-vue';
  import { cloneDeep } from 'lodash-es';
  import {QuotaApi} from '../../../api/gd-server-data/data'
  import Modal from '../gd/Modal.vue'
  import editModal from '../gd/editModal.vue'
  import request from '../../../utils/request'
 
  const shopvalue=ref('')

  const options = ref([{
      value: '郑州供电车间',
      label: '郑州供电车间',
    }, {
      value: '郑州接触网维修工区',
      label: '郑州接触网维修工区',
    }, {
      value: '五里堡接触网运行工区',
      label: '五里堡接触网运行工区',
    }]);
    const handleChange = shopvalue => {
      console.log(shopvalue);
    };
    const handleBlur = () => {
      console.log('blur');
    };
    const handleFocus = () => {
      console.log('focus');
    };
    const filterOption = (input, option) => {
      return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    };

  const modalRef = ref(null)
  const editRef = ref(null)
 const columns = [{
      title: '车间名称',
      dataIndex: 'workShop',
      width: '30%',
    }, 
    {
      title: '班组名称',
      dataIndex: 'className',
    }, 
    {
      title: '绝缘工具',
      dataIndex: 'toolName',
    },
    {
      title: '定额数量',
      dataIndex: 'count',
    },
    {
      title: '单位',
      dataIndex: 'unit',
    },
     {
      title: '操作',
      dataIndex: 'operation',
    }
  ];

    const dataSource = ref([]);
    // const count = computed(() => dataSource.value.length + 1);

    const loadData = async () => {
      const result = await QuotaApi.find()
        dataSource.value = result
    }

    onMounted(async () => {
      // const result =  await QuotaApi.find()
      //  console.log(result)
      // dataSource.value=result
      // dataSource.value = result[0].id
      loadData()
   });
   
    const editableData = reactive({});
    const edit = id => {
      console.log(id)
      editableData[id] = cloneDeep(dataSource.value.filter(item => id === item.id)[0]);
    };
    const save = id => {
      Object.assign(dataSource.value.filter(item => id === item.id)[0], editableData[id]);
      delete editableData[id];
    };
    const onDelete = id => {
      console.log(id)
      dataSource.value = dataSource.value.filter(item => item.id !== id);
      QuotaApi.delete(id)
      loadData()
    };

    
    // const handleAdd = () => {
    //   const newData = {
    //     key: `${count.value}`,
    //     name: `Edward King ${count.value}`,
    //     age: 32,
    //     address: `London, Park Lane no. ${count.value}`,
    //   };
    //   dataSource.value.push(newData);
    // };
    
    const handleSet = () =>{
      // console.log(modalRef.value)
      modalRef.value.showModal()
    }
    const handleFilter =async (shopvalue)=> {
      console.log(shopvalue);
      // loadData(`/api/data?address_like=${address.value}&name_like=${name.value}`)
      const result=await request.get(`/feathers/quota-process?workShop=${shopvalue}`)
      // console.log(result.data)
          dataSource.value=result.data.data
    };
    const handleEdit = (record) =>{
      // console.log(editRef.value)
      // console.log(record)
      editRef.value.showModal(record)
    }
</script>

<style lang="less" scoped>
.body{
  margin-left: 20px;
}
td{
  display: inline-block;
  line-height: 50px;
}
.jiange{
  margin-left:30px ;
}
.block1{
  // display: block;
  line-height: 21px;
  vertical-align:middle;
  width: 177px;
  border:solid 1px black;
  padding: 0;
}
.title1{
    font-size: 24px;
    font-weight:bold ;
    width: 130px;
}
.cont1{
    font-size: 24px; 
    width: 185px; 
}
.button1{
    background-color:rgba(22, 155, 213, 1);
    border:1px solid #fff;
    color: #fff;
    width: 82px;
    height: 35px;
    font-size: 13px;
    border-radius: 6px;
    vertical-align:middle;
    text-align: center;
    line-height: 23px;
}
.button2{
  background-color:rgba(22, 155, 213, 1);
  border:1px solid #fff;
  color: #fff;
  border-radius: 6px;
}
.editable-cell {
  position: relative;
  .editable-cell-input-wrapper,
  .editable-cell-text-wrapper {
    padding-right: 24px;
  }

  .editable-cell-text-wrapper {
    padding: 5px 24px 5px 5px;
  }

  .editable-cell-icon,
  .editable-cell-icon-check {
    position: absolute;
    right: 0;
    width: 20px;
    cursor: pointer;
  }

  .editable-cell-icon {
    margin-top: 4px;
    display: none;
  }

  .editable-cell-icon-check {
    line-height: 28px;
  }

  .editable-cell-icon:hover,
  .editable-cell-icon-check:hover {
    color: rgba(22, 155, 213, 1);
  }

  .editable-add-btn {
    margin-bottom: 8px;
  }
}
.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}
</style>
  